import {useState} from 'react'
import Red from './red1';
import Blue from './blue';
import { RedButton, BlueButton } from './button';

export default function Index() {
  const [RedScore, setRedScore] = useState(0);
  const [BlueScore, setBlueScore] = useState(0);


  function addRed() {
    setRedScore(RedScore  + 1)
  }
  function addBlue() {
    setBlueScore(BlueScore  + 1)
  }
  return (
    <div>
      <Red ></Red>
      <RedButton onClick = {addRed}></RedButton>
      <hr/>
      <Blue blueScore = {BlueScore}></Blue>
      <BlueButton onClick = {addBlue}></BlueButton>
    </div>
  )
}

